<template>
  <div>
    <!-- 面包屑导航栏 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>报修管理</el-breadcrumb-item>
      <el-breadcrumb-item>我的报修</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="5">
          <el-select
            clearable
            @clear="getMyReportList"
            v-model="queryInfo.repairType"
            placeholder="请选择维修类型"
            style="width: 100%"
          >
            <el-option label="电类故障" value="电类故障"></el-option>
            <el-option label="水类故障" value="水类故障"></el-option>
            <el-option label="木工类故障" value="木工类故障"></el-option>
            <el-option label="电梯故障" value="电梯故障"></el-option>
            <el-option label="空调故障" value="空调故障"></el-option>
            <el-option label="洗衣机故障" value="洗衣机故障"></el-option>
            <el-option label="直饮水故障" value="直饮水故障"></el-option>
            <el-option label="热水故障" value="热水故障"></el-option>
            <el-option label="其他类故障" value="其他类故障"></el-option>
          </el-select>
        </el-col>

        <el-col :span="5">
          <el-select
            clearable
            @clear="getMyReportList"
            v-model="queryInfo.repairState"
            placeholder="请选择状态"
            style="width: 100%"
          >
            <el-option label="待分配" value="0"></el-option>
            <el-option label="待接单" value="1"></el-option>
            <el-option label="维修中" value="2"></el-option>
            <el-option label="待评价" value="3"></el-option>
            <el-option label="已评价" value="5"></el-option>
          </el-select>
        </el-col>

        <el-col :span="3">
          <el-button type="primary" @click="getMyReportList()"
            >开始查询</el-button
          >
        </el-col>
      </el-row>

      <!-- 表格数据区域 -->
      <el-table :data="MyReportList" stripe border>
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="userNumber" label="报修人"> </el-table-column>
        <el-table-column prop="building" label="楼栋"> </el-table-column>
        <el-table-column prop="number" label="宿舍号"> </el-table-column>
        <el-table-column prop="repairType" label="维修类型"> </el-table-column>
        <el-table-column
          width="150px"
          sortable
          prop="reportTime"
          label="报修时间"
        >
        </el-table-column>
        <el-table-column prop="repairImage" label="结果">
          <template slot-scope="scope">
            <el-link type="primary" @click="showResultDialog(scope.row)"
              >查看结果</el-link
            >
          </template>
        </el-table-column>
        <el-table-column prop="repairState" label="状态">
          <template slot-scope="scope">
            <el-tag effect="dark" v-if="scope.row.repairState == 0"
              >待分配</el-tag
            >
            <el-tag
              effect="dark"
              type="success"
              v-if="scope.row.repairState == 1"
              >待接单</el-tag
            >
            <el-tag
              effect="dark"
              type="danger"
              v-if="scope.row.repairState == 2"
              >维修中</el-tag
            >
            <el-tag
              effect="dark"
              type="warning"
              v-if="scope.row.repairState == 3"
              >待评价</el-tag
            >
            <el-tag
              effect="dark"
              type="warning"
              v-if="scope.row.repairState == 5"
              >已评价</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column width="200px" prop="address" label="操作">
          <template slot-scope="scope">
            <!-- 编辑用户 -->
            <el-tooltip
              effect="dark"
              content="报修详情"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="primary"
                icon="el-icon-chat-line-square"
                size="small"
                @click="showDetailDialog(scope.row)"
              ></el-button>
            </el-tooltip>

            <el-tooltip
              effect="dark"
              content="评价"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="success"
                icon="el-icon-edit-outline"
                size="small "
                :disabled="scope.row.repairState !== 3"
                @click="showEvaluateDialog(scope.row)"
              ></el-button>
            </el-tooltip>

            <el-tooltip
              effect="dark"
              content="撤销"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="small "
                :disabled="scope.row.repairState !== 0"
                @click="toDelete(scope.row.mainId)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[2, 3, 6, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 展示详细信息的对话框 -->
    <el-dialog
      title="详细信息"
      :visible.sync="showDetailDialogVisible"
      width="50%"
      @close="showDetailDalogClose"
    >
      <div class="demo-image__placeholder">
        <div class="block">
          <span class="demonstration" style="font-family: 100px Extra large"
            ><h2>报修描述：{{ detail.description }}</h2></span
          >
          <el-image :src="detail.imageUrl">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
      </div>
    </el-dialog>

    <!-- 评分的对话框 -->
    <el-dialog
      @close="handleClose"
      title="评分"
      :visible.sync="EvaluateDialog"
      width="27%"
      center
    >
      <div class="divclass">
        <el-rate style="margin: auto" v-model="value" show-text> </el-rate>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="evaluate">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 展示详细信息的对话框 -->
    <el-dialog
      title="维修结果"
      :visible.sync="showResultDialogVisible"
      width="50%"
      @close="showResultDalogClose"
    >
      <div class="demo-image__placeholder">
        <div class="block">
          <span class="demonstration" style="font-family: 100px Extra large"
            ><h2>结果描述：{{ result.repairDesc }}</h2></span
          >
          <el-image :src="result.repairImage">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: { pageSize: 6 },
      MyReportList: [],
      total: 0,
      showDetailDialogVisible: false,
      detail: { imageUrl: "", description: "" },
      EvaluateDialog: false,
      evaluateForm: {},
      value: null,
      text: ["极差", "失望", "一般", "满意", "惊喜"],
      result: {},
      showResultDialogVisible: false,
    };
  },
  methods: {
    //获取表格信息
    async getMyReportList() {
      this.queryInfo.userNumber = JSON.parse(
        sessionStorage.getItem("user")
      ).username;
      const { data: res } = await this.$http.get("repairbill/getMyReport/", {
        params: this.queryInfo,
      });
      if (res.meta.status !== 200) {
        return this.$message.error("请求用户数据失败");
      }
      this.MyReportList = res.data.records;
      this.total = res.data.total;
    },

    // 页大小的变化
    handleSizeChange(newsize) {
      this.queryInfo.pageSize = newsize;
      this.getMyReportList();
    },
    // 页面值的变化
    handleCurrentChange(newPagenum) {
      this.queryInfo.pageNum = newPagenum;
      this.getMyReportList();
    },
    showDetailDialog(row) {
      this.showDetailDialogVisible = true;
      this.detail.imageUrl = row.reportImage;
      this.detail.description = row.reportDesc;
    },
    showDetailDalogClose() {
      this.detail.imageUrl = "";
      this.detail.description = "";
    },
    showEvaluateDialog(row) {
      this.evaluateForm = row;
      this.EvaluateDialog = true;
    },
    //评价抽屉关闭
    handleClose() {
      this.EvaluateDialog = false;
      this.evaluateForm = {};
    },
    //评价操作
    async evaluate() {
      const { data: res } = await this.$http.put("repairbill/evaluate/", {
        mainId: this.evaluateForm.mainId,
        comment: this.text[this.value - 1],
      });
      this.EvaluateDialog = false;
      if (res.meta.status !== 200) {
        return this.$message.error("评价失败");
      }
      this.$message.success("评价成功");
      this.getMyReportList();
    },
    //显示结果对话框
    showResultDialog(row) {
      this.showResultDialogVisible = true;
      this.result.repairDesc = row.repairDesc;
      this.result.repairImage = row.repairImage;
    },
    showResultDalogClose() {
      this.result = {};
      this.showDetailDialogVisible = false;
    },
    //撤销报修
    async toDelete(id) {
      const { data: res } = await this.$http.delete(
        "repairbill/deleteOrderReport/" + id
      );
      if (res.meta.status !== 200) {
        return this.$message.error("撤销失败");
      }
      this.$message.success("撤销成功");
      this.getMyReportList();
    },
  },
  created() {
    this.getMyReportList();
    //sessionStorage.setItem("activePath", "/evaluate");
  },
};
</script>

<style scope>
.divclass {
  width: 50%;
  margin-left: 25%;
  align-content: center;
}
</style>
